<template>
    <div class="upload-image-wrap">
        <el-upload
            v-if="item.limit == 1"
            v-model:file-list="formData[item.prop]"
            action="域名"
            accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG"
            :before-upload="beforeAvatarUpload"
            :name="item.uploadFileName || 'file'"
            :on-success="(response, file, fileList) => uploadOneImagesOnSuccess(file, fileList)"
            :disabled="isBan"
            :show-file-list="false"
        >
            <div
                v-if="imagesList.length"
                class="upload-has-img"
            >
                <img
                    class="select-img"
                    :src="imagesList[0].url"
                >
                <span class="upload-has-img-action">
                    <span class="el-upload-list__item-preview">
                        <el-icon @click.stop="handlePictureCardPreview(imagesList[0])"><ZoomIn /></el-icon>
                    </span>
                    <span
                        v-if="!isBan"
                        class="el-upload-list__item-preview ml-20"
                    >
                        <el-icon><Edit /></el-icon>
                    </span>
                </span>
            </div>
            <el-icon
                v-else
                class="upload-has-img"
                :size="28"
                color="#909399"
            >
                <Plus />
            </el-icon>
        </el-upload>
        <el-upload
            v-else
            v-model:file-list="formData[item.prop]"
            :limit="item.limit || 99"
            action="域名"
            accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatarUpload"
            :name="item.uploadFileName || 'file'"
            :disabled="isBan"
            :on-success="(response, file, fileList) => uploadImagesOnSuccess(file, fileList)"
        >
            <el-icon><Plus /></el-icon>
        </el-upload>
    </div>
</template>

<script setup>
import { reactive, toRefs, computed } from 'vue'
import { useFormProps } from './useFormProps'
import useMessage from '@/utils/message'
import { getFileUrl, compressUpload } from '@/utils/useUtils'
const props = defineProps({
    ...useFormProps
})
const state = reactive({
    imagesList: []
})
const handleRemove = (file) => {
    const delIdx = state.imagesList.findIndex((item) => item.uid == file.uid)
    state.imagesList.splice(delIdx, 1)
}
const handlePictureCardPreview = (file) => {
    let previewImage = [file.url]
    state.imagesList.forEach((item) => {
        if (item.name != file.name) previewImage.push(item.url)
    })
    console.log('预览', previewImage);
}
const handleExceed = () => {
    useMessage.warning(`最多可上传选择 ${props.item.limit || 1} 个文件`)
}
const beforeAvatarUpload = (file) => {
    const fileMaxSize = props.item.fileMaxSize || 5
    const fileName = file.name
    const lastIdx = fileName.lastIndexOf('.')
    const name = fileName.substring(lastIdx, fileName.length)
    const imgType = ['.mp4']
    const findIdx = imgType.findIndex(i => i == name) 
    const _size = file.size / 1024 / 1024
    const isLt2M = _size <= fileMaxSize;
    if (!isLt2M) {
        useMessage.warning(`上传文件大小不能超过 ${fileMaxSize}MB!`)
        return false
    }
    //大于5m压缩
    if(_size > 5 && findIdx < 0) {
        return compressUpload(file)
    } else {
        return true
    }
}
const uploadOneImagesOnSuccess = (file) => {
    const fileObj = [
        {
            name: file.name,
            url: getFileUrl(file.response.data.url),
            notHttp: file.response.data.url,
            status: file.status
        }
    ]
    state.imagesList = fileObj
}
const uploadImagesOnSuccess = (file, fileList) => {
    const list = fileList.map((v) => {
        const imgUrl = v.response ? v.response.data.url : v.url
        return {
            name: v.name,
            url: getFileUrl(imgUrl),
            notHttp: v.notHttp || imgUrl,
            status: v.status
        }
    })
    state.imagesList = list
}
const isBan = computed(() => props.readonly || props.item.readonly || props.disabled || props.item.disabled)
const { imagesList } = toRefs(state)
</script>

<style lang="scss" scoped>
.upload-image-wrap {
  :deep(.upload-has-img) {
    position: relative;
    overflow: hidden;
    width: 148px;
    height: 148px;
    line-height: normal;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    border-radius: 6px;
    .select-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .upload-has-img-action {
      display: none;
      line-height: 148px;
      text-align: center;
      background: rgba($color: $main_font_color, $alpha: 0.6);
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .el-upload-list__item-preview {
        &:last-child{
          margin-left: 16px;
        }
        i {
          font-size: 20px;
          color: #fff;
        }
      }
    }
    &:hover .upload-has-img-action {
      display: block;
    }
  }
  ul {
    margin: 0 0;
  }
  :deep(.el-upload-list) {
    .el-upload-list__item {
      &.is-success {
        .el-upload-list__item-thumbnail {
          object-fit: cover;
        }
      }
    }
  }
  :deep(.el-list-enter-active),
  :deep(.el-list-leave-active) {
    transition: none;
  }
  :deep(.el-list-enter),
  :deep(.el-list-leave-active) {
    opacity: 0;
  }
  :deep(.el-upload-list__item.is-ready),
  :deep(.el-upload-list__item.is-uploading) {
    display: none !important;
  }
}
</style>
